<!doctype html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <!-- Title  -->
    <title>结算</title>
    <!-- Favicon  -->
    <link rel="icon" href="checkout/css/favicon.ico">
    <!-- Core Style CSS -->
    <link rel="stylesheet" href="checkout/css/core-style.css">
    <link rel="stylesheet" href="checkout/css/style_40879531ed07432d85635401cfa9a04c.css">
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<!-- ##### Right Side Cart End ##### -->
<!-- ##### Breadcumb Area Start ##### -->
<div class="breadcumb_area bg-img" style="background-image: url(checkout/images/breadcumb.jpg);">
    <div class="container h-100">
        <div class="row h-100 align-items-center">
            <div class="col-12">
                <div class="page-title text-center">
                    <h2>Checkout</h2>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ##### Breadcumb Area End ##### -->
<!-- ##### Checkout Area Start ##### -->
<div class="checkout_area section-padding-80">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6">
                <div class="checkout_details_area mt-50 clearfix">
                    <div class="cart-page-heading mb-30">
                        <h5>订单地址</h5>
                    </div>
                    <div class="order_box layui-row layui-col-space15" name="addressbox">

                    </div>

                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-5 ml-lg-auto">
                <div class="order-details-confirmation">
                    <div class="cart-page-heading">
                        <h5>订单</h5>
                    </div>

                    <ul class="order-details-form mb-4">
                        <li><span>产品</span> <span>总计</span></li>
                        <div class="productbox" id="tabletop">

                        </div>
                        <li><span>总价</span> <span easy="total">$59.90</span></li>
                    </ul>

                    <a class="btn essence-btn" id="jiesuanBtn">结算</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ##### Checkout Area End ##### -->
<!-- ##### Footer Area Start ##### -->

<!-- ##### Footer Area End ##### -->
<!-- jQuery (Necessary for All JavaScript Plugins) -->
<script src="checkout/js/jquery-2.2.4.min.js"></script>
<!-- Popper js -->
<script src="checkout/js/popper.min.js">
    <!-- Bootstrap js -->
    <script src="checkout/js/bootstrap.min_b69dc44bd3f8459786dc90e5956cd784.js"></script>
<!-- Plugins js -->
<!--<script src="checkout/js/plugins.js"></script>-->
<!-- Classy Nav js -->
<!--<script src="checkout/js/classy-nav.min.js"></script>-->
<!-- Active js -->
<!--<script src="checkout/js/active.js"></script>-->


<script id="productitem" type="text/html">
    <input type="hidden" name="id" easy="proitem">
    <li><span easy="proname">Cocktail Yellow dress</span>x<span easy="pronumber">1</span> <span
            easy="subtotal">$59.90</span></li>
    <input type="hidden" style="width:40px;" name="number" easy="pronumber" class="layui-input">
</script>


<script type="text/html" id="addressitem">
    <div easy="address" class='layui-col-md4'
         style="margin-top:10px;height:120px;border:1px solid orangered;border-radius: 10px;cursor: pointer">
        <div class='addressname' style="">
        </div>
        <div style="margin-top:8px">
            地址:<span class="areatext"></span>
        </div>
        <div class='' style="margin-top:8px;">
            详细地址:<span class="addresstext"></span>
        </div>
        <div class='layui-row' style="margin-top:8px;">
            <div class=' layui-col-md6'>
                联系人:<span class="addrname"></span>
            </div>
            <div class=' layui-col-md6'>
                联系电话:<span class="addrtel"></span>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="addAddress">
    <div class='layui-col-md4' addAddress
         style="margin-top:10px;height:130px;text-align: center;line-height: 120px;font-size: 30px;border-radius: 10px;border:1px solid orangered;cursor: pointer;">
        +
    </div>
</script>

<script src="layui/layui.all.js"></script>
<script th:inline="javascript">
    const $ = layui.$;
    const layer = layui.layer;
    const form = layui.form;
    //收货地址
    showAddress();

    function showAddress() {
        $.ajax({
            url: "address/getaddressbyuserid",
            success: function (result) {
                let data = result.data;
                for (let i = 0; i < data.length; i++) {
                    let itemtext = $("#addressitem").text();
                    let $item = $(itemtext);
                    $item.find(".addressname").text(data[i].addressname);
                    $item.find(".areatext").text(data[i].province + "-" + data[i].city + "-" + data[i].area);
                    $item.find(".addresstext").text(data[i].detailed);
                    $item.find(".addrname").text(data[i].name);
                    $item.find(".addrtel").text(data[i].phone);
                    $item.attr("addressid", data[i].id);
                    if (data[i].isdefault == 1) {
                        selectedAddressID = data[i].id
                        $item.css("background-color", "#8cbf5e");
                    }
                    $("[name='addressbox']").append($item);
                }

                if (data.length < 6) {
                    let itemtext = $("#addAddress").text();
                    let $item = $(itemtext);
                    $("[name='addressbox']").append($item);
                }
            }
        });
    }

    //显示购买的商品
    const productids =/*[[${productids}]]*/;
    const counts =/*[[${counts}]]*/;
    if (!productids || !counts) {
        layer.msg("系统异常,请重新选购", {icon: 3});
        setTimeout(function () {
            location.href = "shopping/index"
        }, 3000);
    }
    const proidArr = productids.split(",");
    const countArr = counts.split(",");
    if (proidArr.length != countArr.length || proidArr.length == 0 || countArr.length == 0) {
        layer.msg("系统异常,请重新选购", {icon: 3});
        setTimeout(function () {
            location.href = "shopping/index"
        }, 3000);
    }

    let total = 0;
    let totalnumber = 0;
    for (let i = 0; i < proidArr.length; i++) {
        let proid = proidArr[i];
        let count = countArr[i];
        $.ajax({
            url: "product/getproduct",
            data: {id: proid},
            async: false,
            success: function (result) {
                let data = result.data;
                let item = $("#productitem").text();
                let $item = $(item);
                $item.find("[name='id']").val(data.id);
                $item.find("[easy='proimg']").attr("src", data.imgurl);
                $item.find("[easy='proname']").text(data.name);
                $item.find("[easy='pronumber']").text(count);
                $item.find("[easy='proprice']").text(data.price);
                $item.find("[easy='subtotal']").text(Number(data.price) * Number(count));
                total += (Number(data.price) * Number(data.count));
                totalnumber += Number(count);
                $(".productbox").append($item);
            }

        })
    }
    $("[easy='total']").text(total);
    $("[easy='totalnumber']").text(totalnumber);
    let selectedAddressID = 0;

    //选择收货地址
    $("[name='addressbox']").on("click", "[easy='address']", function () {
        $("[easy='address']").css("background-color", "#fff");
        $(this).css("background-color", "#8cbf5e");
        selectedAddressID =$(this).attr("addressid");
    });

    //结算
    $("#jiesuanBtn").click(function () {
        $(this).prop("disabled", false);
        let formdata = {
            "id[]": proidArr,
            "number[]": countArr,
            "addressid": selectedAddressID
        };
        $.ajax({
            url:"order/add",
            type: "post",
            data:formdata,
            traditional: true,
            success:function(result){
                console.log(result);
                let code=result.code;
                let data=result.data;
                let msg=result.msg;
                if(code==200){
                    location.href="shopping/payment?id="+data;
                }else{
                    layer.msg("订单创建失败",{icon:2});
                }
            }
        });


    });
</script>
</body>
</html>